<template>
  <el-container>
    <el-main>
      <el-row>
        <el-col class="filter-option">
          <avue-search :option="filterOption"
                       v-model="filterOptions"
                       @change="handleChange">
          </avue-search>
          <el-form :inline="true" :model="formInline" size="small" style="padding: 0 60px;">
            <el-form-item label="资源名称：">
                <el-input
                    v-model="formInline.value1"
                    style="width: 250px"
                    placeholder="资源名称"
                ></el-input>
              <el-button type="success" @click="getDataList">查询</el-button>
              <el-button type="success" @click="applyAll">批量申请</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col class="resources-container">
          <el-container>
            <el-aside>
              <vxe-table
                  height="590px"
                  ref="xTree1"
                  @checkbox-change="typeChange"
                  show-overflow
                  row-key
                  :row-config="{isHover: true}"
                  :show-header="false"
                  :data="typeData"
                  :checkbox-config="{labelField: 'name'}"
                  :tree-config="{transform: true, accordion: true, line: true, iconOpen: 'fa fa-caret-down', iconClose: 'fa fa-caret-right'}">
                <vxe-column type="checkbox" tree-node></vxe-column>
              </vxe-table>
            </el-aside>
            <el-main style="padding: 0 15px" class="resources-list">
              <resource-tidy-card v-for="item of dataList" :card-data="item" @applyAdd="applyAdd"></resource-tidy-card>
            </el-main>
          </el-container>
        </el-col>
        <el-col>
          <vxe-pager
              :current-page.sync="page.currentPage"
              :page-size.sync="page.pageSize"
              :total="page.total"
              @page-change="handleChange"
              :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']">
          </vxe-pager>
        </el-col>
      </el-row>
    </el-main>
    <!--  地图KEY 申请表单  -->
    <map-key-application-form :is-show.sync="showMapKeyApplicationForm" :map-service-list="applyList"/>
  </el-container>
</template>

<script>

/**
 * {资源中心列表}
 *
 * @author: 宋康
 * @date: 2023/2/3
 */
import {queryDictList} from "@/api/basics";
import {queryResourcesPage} from '@/api/resources-center/service'
import ResourceTidyCard from './resource-tidy-card'
import {orgList} from "@/api/operations-center/org";
import {catalogueByParentIdService} from "@/api/electronic-map/electronic-map-service";
import MapKeyApplicationForm from "@/views/resources-center/service/MapKeyApplicationForm";

export default {
  name: "ServiceList",
  components: {
    ResourceTidyCard,
    MapKeyApplicationForm
  },
  data() {
    return {
      servType: [],
      coverage: [],
      catalogue: [],
      filterOptions: {
        servType: [],
        coverage: []
      },
      filterOption: {
        column: [
          {
            label: '服务类型',
            prop: 'servType',
            dicData: this.servType,
            props: {
              label: 'dictValue',
              value: 'dictKey'
            }
          }, {
            label: '数据范围',
            prop: 'coverage',
            dicData: this.coverage,
            props: {
              label: 'dictValue',
              value: 'dictKey'
            }
          }
        ]
      },
      formInline: {
        value1: "",
        value2: "0",
        value3: "",
      },
      dataList: [],
      page: {
        currentPage: 1,
        pageSize: 12,
        total: 0
      },
      typeData:[
        {
          "id": "1551744326291398657",
          "parentId": "0",
          "orgName": "大数据中心",
          "orgSite": "xxxxxxxx"
        },
        {
          "id": "1566710964891656193",
          "parentId": "0",
          "orgName": "自然资源和规划局",
          "orgSite": "管理员组"
        },
        {
          "id": "1621697662440017922",
          "parentId": "0",
          "orgName": "住建局",
          "orgSite": ""
        }
      ],
      applyList:[],
      showMapKeyApplicationForm: false
    }
  },
  methods: {
    /**
     * {获取字典常量}
     *
     * @author: 宋康
     * @date: 2022/10/19 14:55
     */
    getDict() {
      queryDictList(['SERVER_TYPE', 'COVERAGE']).then(res => {
        if (res.status) {
          const data = res.data;
          this.servType = data['SERVER_TYPE'];
          this.coverage = data['COVERAGE']

          this.filterOption.column = [{
            label: '服务类型',
            prop: 'servType',
            dicData: this.servType,
            props: {
              label: 'dictValue',
              value: 'dictKey'
            }
          }, {
            label: '数据范围',
            prop: 'coverage',
            dicData: this.coverage,
            props: {
              label: 'dictValue',
              value: 'dictKey'
            }
          }]
          this.handleChange();
        }
      })
    },
    /**
     * {获取资源列表}
     *
     * @author: 宋康
     * @date: 2023/2/2
     */
    getDataList() {
      let serviceName = this.formInline.value1;
      queryResourcesPage(this.page.currentPage, this.page.pageSize, {
        'resourceName': serviceName,
        'startTime': null,
        'endTime': null,
        'resourceType': this.filterOptions.servType[0],
        'catalogueId': this.getTreeData('xTree1'),
        'coverage': this.filterOptions.coverage[0]
      }).then(res => {
        if (res.status) {
          const data = res.data;
          this.page.total = data.total;
          this.dataList = data.records;
        }
      })
    },
    applyAll() {
      if (this.applyList.length > 0) {
        this.showMapKeyApplicationForm = true;
      } else {
        this.$message.error("请选择至少一条服务");
      }
    },
    /**
     * {查询数据}
     *
     * @author: 宋康
     * @date: 2023/2/2
     */
    handleChange() {
      this._debounce(() => this.getDataList(), 500)
    },
    /**
     * {查询目录列表}
     *
     * @author: 宋康
     * @date: 2022/8/22 13:39
     */
    queryOrgList() {
      // 查询目录
      catalogueByParentIdService(0).then(res => {
        if (res.status) {
          this.typeData = res.data;
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    /**
     * {目录手动勾选触发}
     *
     * @author: 宋康
     * @date: 2023/2/10
     */
    typeChange() {
      this._debounce(() => this.getDataList(), 500);
    },
    /**
     * {获取表格选中数据}
     *
     * @author: 宋康
     * @date: 2022/8/22 14:02
     */
    getTreeData(treeName) {
      let checkboxData = [];
      // 全选
      let entirely = this.$refs[treeName].getCheckboxRecords();
      if (entirely.length > 0) {
        for (let p of entirely) {
          checkboxData.push(p.id);
        }
        // 半选
        let Indeterminate = this.$refs[treeName].getCheckboxIndeterminateRecords();
        if (Indeterminate.length > 0) {
          for (let p of Indeterminate) {
            checkboxData.push(p.id);
          }
        }
      }
      return checkboxData;
    },
    // 勾选
    applyAdd(checked,item) {
      if (this.$store.state.Authentication.access_token) {
        if (item) {
          // this.$message.success(item.resourceId + ":" + checked);
          if (checked) {
            if (this.applyList.indexOf(item) < 0) {
              this.applyList.push(item);
            }
          } else {
            if (this.applyList.indexOf(item) > -1) {
              this.applyList.splice(this.applyList.indexOf(item), 1)
            }
          }
        }
      } else {
        this.$XModal.confirm('未检测到登录信息，是否跳转登录？').then(type => {
          if ('confirm' === type) {
            this._toLogin();
          }
        })
      }
    }
  },
  mounted() {
    this.queryOrgList();
    this.getDict();
  }
}
</script>

<style lang="scss" scoped>
.filter-option {
  &:deep(.avue-search__item) {
    padding: 10px 0 0;
  }
}
.resources-container{

}
.resources-list {
  padding-top: 10px;
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fill, 400px);
  grid-gap: 16px;
}
.el-form-item__label{
  color: #000000;
}
</style>
